<!-- 选择规格 -->
<template>
  <el-dialog :title="title" :visible.sync="mVisible" v-if="mVisible" :append-to-body="appendToBody" :width="dialogWidth"
             :close-on-press-escape="true" :close-on-click-modal="false">
    <el-table :data="tableList" v-loading="!(tableList && tableList.length > 0)" ref="tableData" border fit
              @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column label="序号" type="index" width="70" align="center"></el-table-column>
      <el-table-column label="规格信息" align="center">
        <el-table-column v-if="skusList && skusList.length >= 1" :label="skusList[0].name" prop="sp1" align="center"></el-table-column>
        <el-table-column v-if="skusList && skusList.length >= 2" :label="skusList[1].name" prop="sp2" align="center"></el-table-column>
        <el-table-column v-if="skusList && skusList.length >= 3" :label="skusList[2].name" prop="sp3" align="center"></el-table-column>
      </el-table-column>
      <!-- <el-table-column label="积分价格" prop="usePointLimit" align="center"></el-table-column> -->
      <!-- <el-table-column label="商品价格" prop="price" align="center"></el-table-column> -->
      <el-table-column label="原积分" prop="originUsePointLimit" align="center"></el-table-column>
      <el-table-column label="原价格" prop="originPrice" align="center"></el-table-column>

      <el-table-column label="活动积分" prop="price" align="center">
        <template slot-scope="scope">
          <el-input v-model="scope.row.usePointLimit" :disabled=" payWay === '2'" size="medium" class="text-center"
                    @change="handleInputChange"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="活动价格" prop="usePointLimit" align="center">
        <template slot-scope="scope">
          <el-input v-model="scope.row.price" :disabled=" payWay === '1'" size="medium" class="text-center" @change="handleInputChange"></el-input>
        </template>
      </el-table-column>

      <el-table-column label="库存" prop="stock" align="center"></el-table-column>
    </el-table>
    <div class="set-spec-opr">
      <span>已选规格&nbsp;&nbsp; {{selectionList.length}}</span>&nbsp;
      <span>批量设置：
        <span :class="['click-ele', {'disabled': v.payWay === payWay }]" v-for="(v , index) in batchList" :key="index"
              @click="handleBatchSet(v)">{{v.name}}</span>
      </span>
    </div>
    <span slot="footer" class="dialog-footer" style="text-align: center;display: block;">
      <el-button size="small" @click="handleSubSpec('cancle')">取 消</el-button>
      <el-button size="small" type="primary" @click="handleSubSpec">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: '',
  components: {},
  data () {
    return {
      appendToBody: true,
      dialogWidth: '900px',
      title: '选择规格',
      currId: '',
      currIndex: '',
      tableList: [],
      tableLoading: true,
      totalCount: 0,
      selectionList: [],
      selectionIdsObj: {}
    }
  },
  props: {
    modalShow: {
      type: Boolean,
      defulat: false
    },
    dataList: {
      type: Array,
      defulat: []
    }
  },
  watch: {
    'specList': function (val) {
      this.init(val)
    },
    'payWay': function (val) {
      this.handlePayWay(val)
    }
  },
  computed: {
    mVisible: {
      get () {
        return this.modalShow
      },
      set (val) {
        this.$emit('update:modalShow', val)
      }
    },
    batchList () {
      return this.$store.state.selectProduct.batchList
    },
    specList () {
      return this.$store.state.selectProduct.specList
    },
    skusList () {
      return this.$store.state.selectProduct.skusList
    },
    payWay () {
      return this.$store.state.selectProduct.payWay
    }
  },
  mounted () {
    if (this.specList.length > 0) {
      this.init(this.specList)
    }
  },
  methods: {
    init (val) {
      if (val && val.length > 0) {
        val.forEach(e => {
          e.originPrice = e.originPrice || e.price || 0
          e.originUsePointLimit = e.originUsePointLimit || e.usePointLimit || 0
        })
      }
      this.tableList = val
      setTimeout(() => {
        this.handleDataCheck()
      }, 100)
    },

    /* 处理支付方式 */
    handlePayWay (val) {
      val = val || this.payWay
      this.tableList.forEach(e => {
        // 活动 支付方式 0 积分+金额 1 积分 2 金额
        if (val === '0') {
          e.price = e.originPrice
          e.usePointLimit = e.originUsePointLimit
        }
        if (val === '1') {
          e.price = '0'
          e.usePointLimit = e.originUsePointLimit
        }
        if (val === '2') {
          e.price = e.originPrice
          e.usePointLimit = '0'
        }
      })
    },

    /* 处理勾选 */
    handleDataCheck () {
      this.tableList.forEach(row => {
        if (row.selected) {
          this.$refs.tableData.toggleRowSelection(row)
        }
      })
    },

    handleInputChange () {
    },

    handleSelectionChange (selection) {
      this.selectionList = selection
      this.selectionIdsObj = {}
      selection.forEach(e => {
        this.selectionIdsObj[e.id] = e.id
      })
    },

    handleBatchSet (row) {
      if (row.payWay === this.payWay) {
        return
      }
      if (this.selectionList.length <= 0) {
        this.$message.warning('请选择需要批量设置的规格！')
        return
      }
      this.$prompt('', `批量设置${row.name}`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: row.reg,
        inputErrorMessage: row.name + '格式不正确'
      }).then(({ value }) => {
        this.setVal(row.key, value)
      }).catch(() => { })
    },

    setVal (key, value) {
      this.tableLoading = true
      setTimeout(() => {
        this.tableList.forEach(e => {
          if (this.selectionIdsObj[e.id]) {
            e[key] = value
          }
        })
        this.tableLoading = false
      }, 100)
    },

    handleSubSpec (type) {
      if (type && type === 'cancle') {
        this.$emit('update:modalShow', false)
        return
      }
      let selectionList = this.selectionList
      if (selectionList.length <= 0) {
        this.$message.warning('请选择规格！')
        return
      }
      this.upEmit()
    },
    upEmit () {
      this.tableList.forEach(e => {
        e.selected = !!this.selectionIdsObj[e.id]
      })
      this.$emit('upSendData', this.tableList)
      this.$emit('update:modalShow', false)
    }

  }
}

</script>
<style lang='scss' scoped>
</style>
